<template>
    <div class="UserManage">

    用户管理 
    <div class="text1">
            用户姓名:<input type="text" v-model="value01" style="height: 36px">
            创建时间:
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="select">搜索</el-button>
        </div>
        <div style="padding-top: 10px">
            <el-button type="primary"  @click="dialogFormVisible = true">新增用户</el-button>
        </div>



        <!--增加弹框1-->
        <div>
            <el-dialog title="新增用户" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="用户姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="form">
                    <el-form-item label="用户密码" :label-width="formLabelWidth">
                        <el-input v-model="form.password" autocomplete="off"></el-input>
                    
                    </el-form-item>
                </el-form>
                <el-form :model="form">
                    <el-form-item label="用户角色(必填)" :label-width="formLabelWidth">
                        <el-input v-model="form.role" autocomplete="off" placeholder="(1-管理员,2-超级管理员,3-用户)" type="number" min="1" max="3"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="form">
                    <el-form-item label="用户昵称" :label-width="formLabelWidth">
                        <el-input v-model="form.nickName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="form">
                    <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="form">
                    <el-form-item label="用户手机号" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddate">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!--   编辑弹框信息   --------------->
         <!-- 编辑小区 -->
         <el-dialog title="编辑用户" :visible.sync="dialogFormVisible2">
                <!-- form表单  :model ：表单所有数据的存放载体对象  -->
                <el-form :model="form2">
                <!-- 表单的数据最终需要提交给后台服务器添加到数据库，所以名称要和后台服务器规定的名称对应上 -->
                <!-- 表单项目 label：表单项目名称，:label-width:表单项宽度-->
                
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <!-- 输入框 autocomplete:是否自动补齐，v-model绑定数据，数据会自动存储得到form对象-->
                    <el-input v-model="form2.name" autocomplete="off"></el-input>
                </el-form-item>
                
                <el-form-item label="用户密码" :label-width="formLabelWidth">
                    <el-input v-model="form2.password" autocomplete="off"></el-input>
                </el-form-item>
                <!-- <el-form-item label="用户角色" :label-width="formLabelWidth">
                    <el-input v-model="form2.role" autocomplete="off" readonly></el-input>
                </el-form-item> -->
                <el-form-item label="用户昵称" :label-width="formLabelWidth">
                    <el-input v-model="form2.nickName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                    <el-input v-model="form2.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号" :label-width="formLabelWidth">
                    <el-input v-model="form2.phone" autocomplete="off"></el-input>
                </el-form-item>
                </el-form>

                <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button type="primary" @click="update()">保 存</el-button>
                </div>

            </el-dialog>
        <!-- 删除小区 -->
        <el-dialog
                title="提示"
                :visible.sync="dialogshanchu"
                width="30%"
                style='text-align: left'
                :before-close="handleClose">
                <span>此操作将永久删除该文件, 是否继续?</span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="quxiaoshanchu">取 消</el-button>
                    <el-button type="primary" @click="handleDelete(id)">确 定</el-button>
                </span>
            </el-dialog>

        <!--      --------------------------------------------------------------------------------->

        <!--      ----------------------------------------------------------------------------------------->

        <!--主页面表格-->
        <el-table
                :data="userList"
                border
                style="width: 1200px"
                color:black
                :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
            <el-table-column
                    fixed
                    prop="userList[0].userId"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userList[0].userName"
                    label="用户名"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userList[0].password"
                    label="用户密码"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userList[0].userNickname"
                    label="用户昵称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userList[0].userMail"
                    label="用户邮箱"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="userList[0].userPhone"
                    label="用户手机号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="用户角色"
                    width="150">
            </el-table-column>
                       <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="dialogbianji(scope.row)">编辑用户</el-button>
                    <el-button type="text" size="small" @click="dialogshanchu1(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--页码-->
       <!-- <div class="block">
           <el-pagination
                   layout="prev, pager, next"
                   :total="1">
           </el-pagination>
       </div> -->
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1, 2, 4, 8]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
    </div>
</template>

<script>
export default {
    name:"UserManage",
    data() {
            return {
                queryInfo: {
					pageNum: 1,
					pageSize: 3
				},
                total: 9,
                value01: '',
                value1: '',
                value2: '',
                input: '',
                dialogTableVisible: false,
                dialogFormVisible: false,
                // dialogFormVisible2: false,
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                dialogFormVisible5: false,
                form: {
                    name: '',
                    password:'',
                    nickName:'',
                    email:'',
                    phone:"",
                    role: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                form2: {
                    name: '',
                    password:'',
                    nickName:'',
                    email:'',
                    phone:"",
                    role: ''
                },
                formLabelWidth: '120px',
                userList: [],
                chakanxiaoquList: {},
                chakanxiaoquList1: {},
                addressAll: [],   //省市区
                address1: [], //你选择的地址
                address01: '',
                address001: '',
                location1: '',
                list1: {},
                addOrUpdateFlag: '',
                communityAddress: '',
                communityAreaCode: '',
                communityCity: '',
                communityCoordinates: '',
                communityDistrict: '',
                communityId: '',
                communityLatitude: '',
                communityLongitude: '',
                communityName: '',
                communityProvince: '',
                communityShopCount: '',
                communityStatus: '',
                communityUserCount: '',
                createTime: '',
                distance: '',
                shopIdArr: [],
                addguanlianname: '',
                communityId1: '',
                getids: [],
                src:"",
                userId:'',
                useName:'',
                password:'',
                userNickname:'',
                userMail:'',
                userPhone:'',
                userRole:'',
                //编辑用户弹窗
            dialogFormVisible2:false,

                //删除用户弹窗
            dialogshanchu:false,
            }
        },
        created() {//默认请求全部用户
            // this.getAllProvinceAndCityList();
            this.axios.post("/user/listAll", {
                pageNum: this.queryInfo.pageNum,
				pageSize: this.queryInfo.pageSize,
                userName:this.value01,
            }).then((res)=>{
                    console.log(res.data.data.list)
                this.userList = res.data.data.list;
                console.log(222222222222)
                console.log(this.userList[0].userList[0].password)
                console.log("------------------------------------------")
                console.log(this.queryInfo.pageSize)
                console.log(11111111111111)
                console.log(this.userList)
                console.log("------------------------------------------")

            }).catch((err)=>{

            })
        },
        methods: {
            //模糊查询
            select(){
                this.axios.post("/user/listAll", {
                        pageNum: this.queryInfo.pageNum,
				        pageSize: this.queryInfo.pageSize,
                        userName:this.value01,
                    }).then((res)=>{
                    this.userList = res.data.data.list;
                    console.log("---------111111111111111-------------")
                    console.log(res.data.data.list)
                    this.value1=[];
                    console.log(this.value1)

                    // console.log(
                    //     this.xiaoquList
                    // )
                }).catch((err)=>{

                })

            },
            userselect(){
                this.axios.post("/user/listAll", {
                pageNum: this.queryInfo.pageNum,
				pageSize: this.queryInfo.pageSize,
                userName:this.value01,
            }).then((res)=>{
                    console.log(res.data.data.list)
                this.userList = res.data.data.list;
                console.log("------------------------------------------")
                console.log(this.userList)
                console.log("------------------------------------------")

            }).catch((err)=>{

            })
            },
            handleSizeChange(size) {
				//console.log('每页显示数量发生改变');
				this.queryInfo.pageSize = size;
				this.queryInfo.pageNum = 1;
				// 重新查询
				this.userselect()
			},
			handleCurrentChange(num) {
				//console.log('页码发生改变');
				this.queryInfo.pageNum = num;
				// 重新查询
				this.userselect();
			},
             //获得编辑用户该行id
             dialogbianji(row){
                this.userId= row.userList[0].userId
                this.form2.name = row.userList[0].userName
                this.form2.password = row.userList[0].password
                this.form2.nickName = row.userList[0].userNickname
                this.form2.email = row.userList[0].userMail
                this.form2.phone = row.userList[0].userPhone
                this.form2.role = row.role
                this.dialogFormVisible2 = true
            },
    
            //编辑用户
            update(){
                console.log(this.userId)
                console.log(this.form2.name)
                console.log("---------------")
                this.$http.post(
                     "user/update",
                    {
                        // addOrUpdateFlag:2,
                        userId:this.userId,
                        userName:this.form2.name,
                        password:this.form2.password,
                        userNickname:this.form2.nickName,
                        userMail:this.form2.email,
                        userPhone:this.form2.phone,
                       
                    }
                ).then((res) => {
                        this.communityList("", "", "", this.currentPage, this.pageSize, "");
                        this.$message({type:"success",message:"编辑成功!"})
                    }).catch((err) => {
                        console.log(err)
                    });
                this.dialogFormVisible2=false
            },

            //添加用户数据
            adddate(){
                this.dialogFormVisible = false;
                this.axios.post("/user/saveAll",{
                    // addOrUpdateFlag: 1,
                    
                    userName:this.form.name,
                    password:this.form.password,
                    userNickname:this.form.email,
                    userMail:this.form.email,
                    userPhone:this.form.phone,
                    userRole:this.form.role
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                alert("添加成功");
                window.location.reload();
            },
            //      删除数据
            //获得id，为删除准备
            dialogshanchu1(row){
                this.dialogshanchu = true;
                console.log(row);
                this.id = row.userList[0].userId;
            },
            //关闭删除页面
            handleClose(){
                this.$message({type:"info",message:"已取消删除"})
                this.dialogshanchu = false
            },
            quxiaoshanchu(){
                this.$message({type:"info",message:"已取消删除"})
                this.dialogshanchu = false
            },
              //删除用户
              handleDelete(id) {
                console.log(id);
                this.axios.post(
                    "/user/remove",
                    {
                        id:id
                    }
                )//删除接口只需要传个id就行了 id是当前点击事件传过来的的id 
                    .then((res) => {
                        // this.communityList("", "", "", this.currentPage, this.pageSize, "");
                        this.$message({type:"success",message:"删除成功!"})
                    }).catch((err) => {
                        console.log(err)
                    });
                this.dialogshanchu = false
            },
        },
    
}
</script>

<style scoped>



</style>